<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>奖学金申请页面</title>
    <link rel="stylesheet" type="text/css" href="../static/admin/layui2/css/layui.css"/>
</head>
<body class="layui-layout-body" style="overflow:auto;">
        <div class="layui-anim layui-anim-scale">
            <form class="layui-form layui-form-pane" name="form1" id="form1" style="margin-left: 10px;margin-top: 10px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">奖学金编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sid" id="sid" disabled class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend style="color:#4476A7;font-size: 25px">基本信息</legend>
                </fieldset>
                <div class="layui-form-item" id="area-picker">
                    <div class="layui-form-label">籍贯</div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="province" class="province-selector"  lay-filter="province-1">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="city" class="city-selector" lay-filter="city-1">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="county" class="county-selector" lay-filter="county-1">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" >
                    <label class="layui-form-label">户口类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="household" value="1" title="城镇户口" checked>
                        <input type="radio" name="household" value="0" title="农村户口">
                    </div>
                </div>
                <div class="layui-form-item" >
                    <label class="layui-form-label" style="width: 130px">是否为贫困生</label>
                    <div class="layui-input-block">
                        <input type="radio" name="poverty" value="1" title="是" checked>
                        <input type="radio" name="poverty" value="0" title="否">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">家庭年收入</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">银行卡号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="card" id="card"  class="layui-input" lay-verify="required">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>亲属信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <div class="layui-inline" id="relation1">
                        <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="relationShip" class="layui-input" lay-verify="required" placeholder="与你的关系">
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="relationName" class="layui-input" lay-verify="required" placeholder="姓名">
                        </div>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="relationOccupation" class="layui-input" lay-verify="required" placeholder="职业">
                        </div>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="relationPhone" class="layui-input" lay-verify="phone" placeholder="联系电话">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" id="addrelation" ><i class="layui-icon layui-icon-add-1"></i></button>
                    </div>
                </div>
                <div id="relation2"></div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>个人优势</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 160px">是否参加过志愿服务</label>
                    <div class="layui-input-block">
                        <input type="checkbox"  name="volunteer" lay-skin="switch" lay-filter="switchTest1" lay-text="是|否">
                    </div>
                </div>
                <div id="volunteerTime" style="margin-bottom: 20px">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">成绩排名</label>
                    <div class="layui-input-inline">
                        <select name="grade" id="grade" lay-verify="required">
                            <option value=""></option>
                            <option value="1">前10%</option>
                            <option value="2">10%-20%</option>
                            <option value="3">20%-40%</option>
                            <option value="4">40%以下</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 130px">是否有证书</label>
                    <div class="layui-input-inline" style="width: 70px">
                        <input type="checkbox"  name="Iscertificate" lay-skin="switch" lay-filter="switchTest2" lay-text="是|否">
                    </div>
                    <div class="layui-form-mid layui-word-aux">例如四六级或其他技能与获奖证书</div>
                </div>
                <div id="certificate" style="margin-bottom: 20px">
                </div>
                <div id="add" style="margin-bottom: 20px"></div>
                <div class="layui-form-item">
                    <label class="layui-form-label">申请说明</label>
                    <div class="layui-input-inline">
                        <textarea name="appExplain" class="layui-textarea" style="width: 400px" placeholder="简单介绍自己并给出申请理由"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">提交</button>
                    </div>
                </div>
            </form>
</div>
        <script src="../static/admin/layui2/layui.js" type="text/javascript" charset="utf-8"></script>
        <script src="../static/admin/js/layarea.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['element','form','jquery','layer','laydate','layarea'], function(){
        element = layui.element
        ,form = layui.form
        ,laydate = layui.laydate
        ,layer = layui.layer
            ,layarea = layui.layarea
        $ =layui.jquery;

        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                console.log(res);
            }
        });

        //监听指定开关
        form.on('switch(switchTest1)', function(data){
            if(this.checked==true){
                var str=
                    '                    <label class="layui-form-label" style="width: 160px">志愿服务时长</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text"  name="volunteerTime" lay-verify="required" class="layui-input" placeholder="几天或几小时">\n' +
                    '                    </div>\n'
                $('#volunteerTime').html(str);
                form.render();
            }else{
                $('#volunteerTime').html(" ");
                form.render();
            }
        });

        var listSize = '';
        var spotMax='';
        form.on('switch(switchTest2)', function(data){
            if(this.checked==true){
                var str='<div class="layui-inline">\n' +
                    '              <label class="layui-form-label">证书</label>\n' +
                    '              <!-- 动态生成二级分类-->\n' +
                    '              <div id="appendSecond" name=""> ' +
                    '<div class="layui-input-block" style=\"margin-bottom: 10px;\">\n' +
                '                        <input type="text" name="certificateName" lay-verify="required" class="layui-input" placeholder="证书名称">\n' +
                '                    </div>\n'
                    '</div>\n' +
                    '            </div>'
                var button=
                    '              <div class="layui-inline">\n' +
                    '                <button type="button" class="layui-btn layui-btn-primary" id="addbutton" ><i class="layui-icon layui-icon-add-1"></i></button>\n' +
                    '            </div>\n'
                $('#certificate').html(str);
                $('#add').html(button);
                spotMax=''
                form.render();
            }else{
                $('#certificate').html(" ");
                $('#add').html(" ");
                form.render();
            }
        });

        spotMax = listSize;
        $(document).on('click','#addbutton',function() {
            if (spotMax > 3 - listSize) {
                layer.alert("最多只能添加4个证书");
            } else {
                var html = " <div class=\"layui-input-block\" id=\"secondCategory\" style=\"margin-bottom: 10px;\">\n" +
                    "                <input type=\"input\" id=\"generate" + spotMax + "\" name=\"certificateName\" lay-verify=\"required\" class=\"layui-input\" placeholder=\"证书名称\">\n" +
                    "              </div>";
                $("#appendSecond").append(html);
                spotMax++;
            }
        });

        var listSize2='';
        $(document).on('click','#addrelation',function() {
            if (listSize2 >2) {
                layer.alert("最多只能添加3个亲属");
            } else {
                var html = '<div class="layui-form-item">\n' +
                    '                    <div class="layui-inline">\n' +
                    '                        <div class="layui-input-inline" style="width: 100px;">\n' +
                    '                        <input type="text" name="relationShip" class="layui-input" lay-verify="required" placeholder="与你的关系">\n' +
                    '                        </div>\n' +
                    '                        <div class="layui-input-inline" style="width: 100px;">\n' +
                    '                            <input type="text" name="relationName" class="layui-input" lay-verify="required" placeholder="姓名">\n' +
                    '                        </div>\n' +
                    '                        <div class="layui-input-inline" style="width: 120px;">\n' +
                    '                            <input type="text" name="relationOccupation" class="layui-input" lay-verify="required" placeholder="职业">\n' +
                    '                        </div>\n' +
                    '                        <div class="layui-input-inline" style="width: 120px;">\n' +
                    '                            <input type="text" name="relationPhone" class="layui-input" lay-verify="phone" placeholder="联系电话">\n' +
                    '                        </div>\n' +
                    '                    </div>'
                $("#relation2").append(html);
                listSize2++;
            }
        });


        form.render();
        form.on('submit(demo1)',function (data) {
            var relationShip = [];
            var relationName = [];
            var relationOccupation = [];
            var relationPhone = [];
            var certificate =[];
            $("input[name='relationShip']").each(function () {
                relationShip.push($(this).val());
            });
            $("input[name='relationName']").each(function () {
                relationName.push($(this).val());
            });
            $("input[name='relationOccupation']").each(function () {
                relationOccupation.push($(this).val());
            });
            $("input[name='relationPhone']").each(function () {
                relationPhone.push($(this).val());
            });
            $("input[name='certificateName']").each(function () {
                certificate.push($(this).val());
            });
            var relationShipB=JSON.stringify(relationShip);
            var relationNameB=JSON.stringify(relationName);
            var relationOccupationB=JSON.stringify(relationOccupation);
            var relationPhoneB=JSON.stringify(relationPhone);
            var certificateB=JSON.stringify(certificate);
            $.ajax({
                type:"POST",
                url:"/scholarshipApply/insert",
                data:{
                    "sid":data.field.sid,
                    "province":data.field.province,
                    "city":data.field.city,
                    "county":data.field.county,
                    "household":data.field.household,
                    "poverty":data.field.poverty,
                    "price_min":data.field.price_min,
                    "price_max":data.field.price_max,
                    "card":data.field.card,
                    "volunteerTime":data.field.volunteerTime,
                    "grade":data.field.grade,
                    "appExplain":data.field.appExplain,
                    "relationShip":relationShipB,
                    "relationName":relationNameB,
                    "relationOccupation":relationOccupationB,
                    "relationPhone":relationPhoneB,
                    "certificate":certificateB,
                },
                dataType:"json",
                success:function (res) {
                    if (res.flag){
                        layer.msg('申请成功', {icon: 1});
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//关闭弹出层
                            parent.location.reload();//重新加载父页面表格
                        }, 2100);
                    }else {
                        layer.msg(res.msg,{icon:5,offset:"auto",time:2000});//提示框
                    }
                }
            })
            return false;
        });
    });
</script>
</body>

</html>